import React, { useState, useEffect } from 'react'
import NavBar from '@components/NavBar'
import { CapsuleTabs } from 'antd-mobile'
import './index.less'

const Bill = (props) => {
  const [list, setList] = useState([
    {
      key: 1,
      title: '静态',
    },
    {
      key: 2,
      title: '推荐'
    },
    {
      key: 3,
      title: '推荐2代'
    },
    {
      key: 4,
      title: '团队'
    },
    {
      key: 5,
      title: '平级'
    },
    {
      key: 6,
      title: '提现'
    },
    {
      key: 7,
      title: '提现nana'
    },
    {
      key: 8,
      title: '节点收益'
    },
    {
      key: 9,
      title: '认购节点'
    },
    {
      key: 10,
      title: '特殊'
    }
  ])

  useEffect(() => {}, [])

  const renderContent = (key) => {
    return (
      <div className="bill-list">
        {
          props.state.listReward.filter(item => item.rewardType === key).map(item => (
            <div className="bill-list-item">
              <p>
                <span>USDT: {item.amountUsdt}</span>
                <span>NANA: {item.amountNa}</span>
              </p>
              <p>
                <span>{item.createdAt}</span>
              </p>
            </div>
          ))
        }
      </div>
    )
  }

  return (
    <>
      <div className="background"></div>
      <div className="bill">
        <NavBar title="账单明细" />
        <CapsuleTabs defaultActiveKey="1">
          {
            list.map(item => (
              <CapsuleTabs.Tab title={item.title} key={item.key}>
                {renderContent(String(item.key))}
              </CapsuleTabs.Tab>
            ))
          }
        </CapsuleTabs>
      </div>
    </>
  )
}

export default Bill
